<template>
    <!-- 搜索页面 -->
    <van-search v-model="value" show-action placeholder="请输入搜索关键词" @search="onSearch">
        <template #left>
            <van-icon name="arrow-left" size="22" @click="$router.go(-1)" />
        </template>
        <template #action>
            <div @click="onClickButton">搜索</div>
        </template>
    </van-search>
        <van-cell title="搜索历史" value="隐藏"/>
    <div class="Tagbox">
        <van-tag @click="getsearchdata" v-for="item in hotArr" :key="item.wordid" color="#efefef" text-color="#ff6347">{{item.keyword}}</van-tag>
    </div>
        <van-cell title="热门搜索" value="隐藏" />
    <div class="Tagbox">
        <van-tag @click="getsearchdata" v-for="item in hotArr" :key="item.wordid" color="#efefef" text-color="#ff6347">{{item.keyword}}</van-tag>
    </div>
</template>
<script lang='ts' setup>
import { ref } from 'vue';
// 引入搜索页面接口
import { gosearch,hotword } from '@/api/searchapi'
const value = ref<string>('')   // 搜索关键字
// 定义数组每一项的类型
interface itemType{
    [propName:string]:any
}
const hotArr=ref<itemType[]>([])
// 定义调用搜索列表接口的方法
const getsearchdata = () => {
    gosearch({ count: 1, limitNum: 10, keyword: value.value }).then((res: any) => {
        if (res.code == 200) {
            console.log('搜索列表', res);
        }
    })
}
// 调用热门搜索接口
hotword().then((res:any)=>{
    console.log('热门搜索',res);
    if(res.code==200){
        hotArr.value=res.data
    }
})

// 搜索框确认搜索时
const onSearch = (value: string) => {
    // console.log(value);
    // 调用搜索列表接口
    getsearchdata()
}
// 点击右侧搜索按钮时
const onClickButton = () => {
    // console.log(value.value);
    // 调用搜索列表接口
    getsearchdata()
}

</script>
<style scoped>
.van-icon {
    margin-right: 10px;
}
.Tagbox{
    padding: 0 10px;
}
.van-tag{
    margin: 10px;
    padding: 3px 5px;
}
</style>
